<template>
  <view class="item">
    <!-- 左侧勾选 -->
    <u-checkbox
      active-color="#e03440"
      shape="circle"
      :value="item.isChecked"
      @change="handleChange"
    ></u-checkbox>
    <!-- 中间图片 -->
    <u-image width="191" height="191" :src="item.goods_pic"></u-image>
    <!-- 右侧信息 -->
    <view class="info">
      <view class="name">{{ item.goods_name }}</view>
      <view class="priceBar">
        <view class="price">¥{{ item.goods_price }}</view>
        <view class="number">
          <view class="btn" @click="minusProd">-</view>

          {{ item.number }}

          <view class="btn" @click="changeNumber({
            goods_id: item.goods_id,
            number: item.number + 1
          })">+</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    methods: {
      ...mapMutations('cart', ['changeNumber', 'delGoods']),
      handleChange() {
        console.log('出发了change');
        // change事件被触发,其实就是用户想要选中或者反选当前商品
        // 这里的购物车数据都在 vuex 需要通知 mutations
        this.$store.commit('cart/toggleCheck', this.item.goods_id)
      },
      async minusProd() {
        // 加的话无所谓, 减的话, 如果已经只有一个, 再减下去, 就要询问是否删除
        if (this.item.number === 1) {
          // 删除
          const [err, res] = await uni.showModal({
            content: '是否删除商品?'
          })
          if (res.confirm) {
            // 删除
            this.delGoods(this.item.goods_id)
          }
        }else{
          this.changeNumber({
            goods_id: this.item.goods_id,
            number: this.item.number - 1
          })
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
.item {
  display: flex;
  align-items: center;
  padding: 17rpx 34rpx;
  .info {
    flex: 1;
    padding-left: 19rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150rpx;
  }
  .name {
    color: #434343;
    font-size: 24rpx;
  }
  .priceBar {
    display: flex;
    justify-content: space-between;
    .price {
      color: $theme-color;
      font-size: 24rpx;
      font-weight: bold;
    }
    .number {
      color: #8a8a8a;
      display: flex;
    }
    .btn {
      border: 2rpx solid #8a8a8a;
      line-height: 32rpx;
      width: 32rpx;
      text-align: center;
      border-radius: 50%;
      margin: 0 10rpx;
    }
  }
}
</style>